<!DOCTYPE html>
<html>
<head>
<title>Diagrama de Péndulos Físicos</title>
</head>
<body>
<canvas id="myCanvas" width="900" height="400" style="border:1px solid #d3d3d3;"></canvas>
<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    // --- General Settings ---
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2;
    ctx.textBaseline = 'middle';

    // --- Diagram (a) ---
    function drawA() {
        const cx = 200, cy = 180;
        const r_outer = 80;
        const r_inner = 70;

        // Draw rings
        ctx.beginPath();
        ctx.arc(cx, cy, r_outer, 0, 2 * Math.PI);
        ctx.stroke();

        ctx.beginPath();
        ctx.arc(cx, cy, r_inner, 0, 2 * Math.PI);
        ctx.stroke();

        // Draw pivot support
        const pivotY = cy - r_outer;
        ctx.beginPath();
        ctx.moveTo(cx, pivotY);
        ctx.lineTo(cx - 6, pivotY + 10);
        ctx.lineTo(cx + 6, pivotY + 10);
        ctx.closePath();
        ctx.stroke();

        // Draw labels
        ctx.font = '20px "Times New Roman"';
        ctx.textAlign = 'center';
        ctx.fillText('O', cx, pivotY - 15);
        
        // Center point C
        ctx.beginPath();
        ctx.arc(cx - 20, cy, 2.5, 0, 2 * Math.PI);
        ctx.fill();
        ctx.textAlign = 'left';
        ctx.fillText('C', cx - 15, cy + 3);

        ctx.textAlign = 'center';
        ctx.fillText('(a)', cx, cy + r_outer + 40);
    }

    // --- Diagram (b) ---
    function drawB() {
        const cx = 450, cy = 180;
        const r_outer = 80;
        const r_inner = 70;
        const angle_offset = Math.PI / 3.5; // ~51 degrees

        const startAngle = -Math.PI / 2 - angle_offset;
        const endAngle = -Math.PI / 2 + angle_offset;
        
        // Draw arcs
        ctx.beginPath();
        ctx.arc(cx, cy, r_outer, startAngle, endAngle);
        ctx.stroke();

        ctx.beginPath();
        ctx.arc(cx, cy, r_inner, startAngle, endAngle);
        ctx.stroke();

        // Connect arc ends
        const p1_outer = { x: cx + r_outer * Math.cos(startAngle), y: cy + r_outer * Math.sin(startAngle) };
        const p1_inner = { x: cx + r_inner * Math.cos(startAngle), y: cy + r_inner * Math.sin(startAngle) };
        const p2_outer = { x: cx + r_outer * Math.cos(endAngle), y: cy + r_outer * Math.sin(endAngle) };
        const p2_inner = { x: cx + r_inner * Math.cos(endAngle), y: cy + r_inner * Math.sin(endAngle) };
        
        ctx.beginPath();
        ctx.moveTo(p1_outer.x, p1_outer.y);
        ctx.lineTo(p1_inner.x, p1_inner.y);
        ctx.stroke();
        
        ctx.beginPath();
        ctx.moveTo(p2_outer.x, p2_outer.y);
        ctx.lineTo(p2_inner.x, p2_inner.y);
        ctx.stroke();

        // Draw pivot support
        const pivotY = cy - r_outer;
        ctx.beginPath();
        ctx.moveTo(cx, pivotY);
        ctx.lineTo(cx - 6, pivotY + 10);
        ctx.lineTo(cx + 6, pivotY + 10);
        ctx.closePath();
        ctx.stroke();
        
        // Draw labels
        ctx.font = '20px "Times New Roman"';
        ctx.textAlign = 'center';
        ctx.fillText("O'", cx, pivotY - 15);

        // Center point C
        ctx.beginPath();
        ctx.arc(cx - 20, cy, 2.5, 0, 2 * Math.PI);
        ctx.fill();
        ctx.textAlign = 'left';
        ctx.fillText('C', cx - 15, cy + 3);

        ctx.textAlign = 'center';
        ctx.fillText('(b)', cx, cy + r_outer + 40);
    }

    // --- Diagram (c) ---
    function drawC() {
        const pivotX = 700, pivotY = 80;
        const r1 = 100; // inner radius from pivot
        const r2 = 120; // outer radius from pivot
        const angle_offset = Math.PI / 5; // 36 degrees

        const startAngle = Math.PI / 2 - angle_offset;
        const endAngle = Math.PI / 2 + angle_offset;

        // Calculate corner points
        const p_inner_1 = { x: pivotX + r1 * Math.cos(startAngle), y: pivotY + r1 * Math.sin(startAngle) };
        const p_outer_1 = { x: pivotX + r2 * Math.cos(startAngle), y: pivotY + r2 * Math.sin(startAngle) };
        const p_inner_2 = { x: pivotX + r1 * Math.cos(endAngle), y: pivotY + r1 * Math.sin(endAngle) };
        const p_outer_2 = { x: pivotX + r2 * Math.cos(endAngle), y: pivotY + r2 * Math.sin(endAngle) };

        // Draw the shape outline
        ctx.beginPath();
        ctx.moveTo(p_inner_1.x, p_inner_1.y);
        ctx.lineTo(p_outer_1.x, p_outer_1.y);
        ctx.arc(pivotX, pivotY, r2, startAngle, endAngle, false);
        ctx.lineTo(p_inner_2.x, p_inner_2.y);
        ctx.arc(pivotX, pivotY, r1, endAngle, startAngle, true);
        ctx.closePath();
        ctx.stroke();

        // Draw labels
        ctx.font = '20px "Times New Roman"';
        ctx.textAlign = 'center';
        ctx.fillText('O"', pivotX, pivotY - 15);

        // Draw center of mass C
        const c_y_offset = 90;
        ctx.beginPath();
        ctx.arc(pivotX, pivotY + c_y_offset, 2.5, 0, 2 * Math.PI);
        ctx.fill();
        ctx.font = '20px "Times New Roman"';
        ctx.textAlign = 'right';
        ctx.fillText('C', pivotX - 5, pivotY + c_y_offset + 3);

        // Draw "悬线" label and lines
        ctx.font = '18px "SimSun"';
        ctx.textAlign = 'left';
        const labelX = 780, labelY = 135;
        ctx.fillText('悬线', labelX, labelY);

        const pointerOrigin = {x: labelX - 10, y: labelY};
        
        ctx.lineWidth = 1;
        ctx.beginPath();
        // Line to right radial line
        ctx.moveTo(pointerOrigin.x, pointerOrigin.y);
        ctx.lineTo( (pivotX + p_outer_1.x)/2 + 5, (pivotY + p_outer_1.y)/2 );
        // Line to left radial line
        ctx.moveTo(pointerOrigin.x, pointerOrigin.y);
        ctx.lineTo( (pivotX + p_outer_2.x)/2 - 5, (pivotY + p_outer_2.y)/2 );
        ctx.stroke();
        ctx.lineWidth = 2;

        // Reset font and alignment for other text
        ctx.font = '20px "Times New Roman"';
        ctx.textAlign = 'center';
        ctx.fillText('(c)', pivotX, pivotY + r2 + 40);
    }

    // --- Main Caption ---
    function drawCaption() {
        ctx.font = '22px "SimSun"';
        ctx.textAlign = 'center';
        ctx.fillText('习题 10-12 图', 450, 350);
    }

    // --- Execute Drawing ---
    drawA();
    drawB();
    drawC();
    drawCaption();
</script>
</body>
</html>